<template>
  <div v-if="question" class="question-grading-area">
    <div class="question-header-info">
      <h3>第 {{ questionIndex + 1 }} 题 <span class="question-points">({{ question.score }} 分)</span></h3>
      <span class="question-type-badge">{{ question.quTypeDictText }}</span>
    </div>

    <div class="question-content-panel">
      <h4>题目内容:</h4>
      <div class="question-text" v-html="question.content"></div>

      <div v-if="['单选题', '多选题','判断题'].includes(question.quTypeDictText)" class="options-display">
        <h5>选项:</h5>
        <div class="options-list">
          <div
            v-for="(option) in question.answerVoList"
            :key="option.label"
            class="option-item"
            :class="{
              'is-correct-answer': option.isCorrect,
              'student-selected': question.studentAnswer && question.studentAnswer.includes(option.label)
            }"
          >
            <span class="option-label">{{ option.abc }}.</span>
            <span class="option-content" v-html="option.content"></span>
            <div class="option-indicators">
                <span v-if="(question.correctAnswerVo.optionIds || []).includes(option.id)" class="indicator correct-indicator" title="正确答案">
                <i class="fas fa-check-circle"></i> 正确
                </span>
              <span v-if="question.userAnswer.answerIds && (question.userAnswer.answerIds || []).includes(option.id)" class="indicator selected-indicator" title="学生选择">
                <i class="fas fa-user-check"></i> 学生选择
              </span>
            </div>
          </div>
        </div>
      </div>

      <div v-else class="text-answer-display">
        <div class="answer-section">
          <h5><i class="fas fa-bullseye"></i> 标准答案:</h5>
          <div class="standard-answer-box" v-html="question.analysis || '未提供标准答案'"></div>
        </div>
        <div class="answer-section">
          <h5><i class="fas fa-user-edit"></i> 学生答案:</h5>
          <div class="student-answer-box">{{ question.userAnswer.answerText || '学生未作答' }}</div>
        </div>
      </div>
    </div>

    <div class="grading-controls-panel">
      <div class="score-input-section">
        <label for="question-score" class="score-label">给分:</label>
        <div class="score-input-group">
          <input
            type="number"
            id="question-score"
            :value="editableQuestionScore"
            @input="updateScore($event.target.value)"
            :max="question.score"
            min="0"
            step="0.5"
            class="score-input"/>
          <span class="score-max">/ {{ question.score }}</span>
        </div>
        <div class="quick-score-buttons">
          <button @click="setQuickScore(0)" class="btn btn-xs btn-outline">0分</button>
          <button @click="setQuickScore(question.score / 2)" class="btn btn-xs btn-outline">半分</button>
          <button @click="setQuickScore(question.score)" class="btn btn-xs btn-outline">满分</button>
        </div>
      </div>

      <div class="comment-section">
        <label for="question-comment" class="comment-label">批改意见:</label>
        <textarea
          id="question-comment"
          :value="editableQuestionComment"
          @input="updateComment($event.target.value)"
          placeholder="请输入对此题的批改意见..."
          rows="4"
          class="comment-input"
        ></textarea>
      </div>
    </div>
  </div>
  <div v-else class="no-question-selected">
    <p>请从左侧导航选择题目进行批改。</p>
  </div>
</template>

<script setup>
import { ref, watch, computed } from 'vue';
import { deepClone } from '../utils'; // Assuming deepClone is robust

const props = defineProps({
  question: Object,
  questionIndex: Number
});

const emit = defineEmits(['update:question']);

const internalQuestion = ref(null);

watch(() => props.question, (newQuestion) => {
  internalQuestion.value = newQuestion ? deepClone(newQuestion) : null;
}, { immediate: true, deep: true });

const editableQuestionScore = computed(() => internalQuestion.value?.userAnswer.gradingResultDTO?.userScore ?? '');
const editableQuestionComment = computed(() => internalQuestion.value?.comment ?? '');


const updateScore = (value) => {
  if (!internalQuestion.value) return;
  let score = parseFloat(value);
  if (isNaN(score)) {
    internalQuestion.value.userAnswer.gradingResultDTO.userScore= null; // Allow clearing
  } else {
    score = Math.max(0, Math.min(score, props.question.score));
    internalQuestion.value.userAnswer.gradingResultDTO.userScore = score;
  }
  emit('update:question', deepClone(internalQuestion.value));
};

const setQuickScore = (scoreValue) => {
  if (!internalQuestion.value) return;
  const score = Math.max(0, Math.min(parseFloat(scoreValue), props.question.score));
 internalQuestion.value.score.userAnswer.gradingResultDTO.userScore = score;
  emit('update:question', deepClone(internalQuestion.value));
};

const updateComment = (value) => {
  if (!internalQuestion.value) return;
  internalQuestion.value.comment = value;
  emit('update:question', deepClone(internalQuestion.value));
};
</script>

<style scoped>
.question-grading-area {
  padding: 1.5rem;
  background-color: #fdfdfd;
  border-radius: 0.3rem; /* var(--border-radius) */
  height: 100%;
  display: flex;
  flex-direction: column;
}

.question-header-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid #e9ecef;
}

.question-header-info h3 {
  margin: 0;
  font-size: 1.3rem;
  color: #343a40; /* var(--dark-color) */
}
.question-points {
  font-size: 0.9rem;
  color: #6c757d; /* var(--text-muted-color) */
  font-weight: normal;
}

.question-type-badge {
  background-color: #6c757d; /* var(--secondary-color) */
  color: white;
  padding: 0.3em 0.7em;
  border-radius: 0.2rem; /* var(--border-radius) */
  font-size: 0.8rem;
  font-weight: 500;
}

.question-content-panel {
  margin-bottom: 1.5rem;
  flex-grow: 1; /* Allow this to grow and push controls down */
}

.question-content-panel h4, .question-content-panel h5 {
  color: #495057;
  margin-top: 0;
  margin-bottom: 0.5rem;
  font-size: 1rem;
}
.question-content-panel h5 { font-size: 0.9rem; font-weight: 600; }

.question-text {
  background-color: #f8f9fa; /* var(--light-color) */
  padding: 0.75rem 1rem;
  border-radius: 0.2rem; /* var(--border-radius) */
  margin-bottom: 1rem;
  line-height: 1.6;
  color: #212529; /* var(--text-color) */
  border: 1px solid #e9ecef;
}
.question-text :deep(p:last-child) { /* If v-html generates <p> */
    margin-bottom: 0;
}


/* Options Display */
.options-display { margin-top: 1rem; }
.options-list { display: flex; flex-direction: column; gap: 0.5rem; }
.option-item {
  padding: 0.6rem 0.8rem;
  border: 1px solid #dee2e6; /* var(--border-color) */
  border-radius: 0.2rem; /* var(--border-radius) */
  background-color: #fff;
  display: flex;
  align-items: center;
  font-size: 0.9rem;
  position: relative; /* For indicators */
}
.option-label { font-weight: bold; margin-right: 0.5rem; color: #007bff; /* var(--primary-color) */ }
.option-content { flex-grow: 1; }
.option-item.is-correct-answer { border-left: 4px solid #28a745; /* var(--success-color) */ }
.option-item.student-selected { background-color: #e7f3ff; border-color: #007bff; } /* Light blue for student selection */
.option-item.is-correct-answer.student-selected { background-color: #d4edda; border-color: #28a745; } /* If student picked correct */


.option-indicators {
  display: flex;
  align-items: center;
  margin-left: auto; /* Push to the right */
  padding-left: 1rem;
}
.indicator {
  font-size: 0.75rem;
  padding: 0.2em 0.4em;
  border-radius: 0.2rem;
  margin-left: 0.5rem;
  white-space: nowrap;
}
.indicator i { margin-right: 0.25rem; }
.correct-indicator { color: #28a745; /* var(--success-color) */ background-color: #eaf6ec; }
.selected-indicator { color: #007bff; /* var(--primary-color) */ background-color: #e7f3ff; }


/* Text Answer Display */
.text-answer-display { margin-top: 1rem; display: flex; flex-direction: column; gap: 1rem;}
.answer-section h5 i { margin-right: 0.3rem; color: #6c757d; }
.standard-answer-box, .student-answer-box {
  padding: 0.75rem 1rem;
  border: 1px solid #dee2e6; /* var(--border-color) */
  border-radius: 0.2rem; /* var(--border-radius) */
  background-color: #f8f9fa; /* var(--light-color) */
  min-height: 60px;
  line-height: 1.5;
  white-space: pre-wrap; /* Preserve formatting */
}
.student-answer-box { background-color: #e7f3ff; border-color: #b8daff; } /* Light blue for student answer */


/* Grading Controls Panel */
.grading-controls-panel {
  margin-top: auto; /* Pushes to bottom if question content is short */
  padding-top: 1rem;
  border-top: 1px solid #e9ecef;
}
.score-input-section, .comment-section {
  margin-bottom: 1rem;
}
.score-label, .comment-label {
  display: block;
  font-weight: 600;
  margin-bottom: 0.3rem;
  font-size: 0.9rem;
  color: #495057;
}

.score-input-group {
  display: flex;
  align-items: center;
  margin-bottom: 0.5rem;
}
.score-input {
  padding: 0.5rem 0.75rem;
  font-size: 1rem;
  border: 1px solid #ced4da; /* var(--border-color) */
  border-radius: 0.2rem; /* var(--border-radius) */
  width: 100px; /* Adjust as needed */
  text-align: center;
}
.score-input:focus {
  border-color: #007bff; /* var(--primary-color) */
  box-shadow: 0 0 0 0.2rem rgba(0,123,255,.25);
  outline: none;
}
.score-max {
  margin-left: 0.5rem;
  font-size: 1rem;
  color: #6c757d; /* var(--text-muted-color) */
}

.quick-score-buttons .btn { margin-right: 0.5rem; }
.btn { /* Basic button styling (can be global) */
  padding: 0.5rem 1rem;
  font-size: 0.9rem;
  border-radius: 0.25rem; /* var(--border-radius) */
  cursor: pointer;
  border: 1px solid transparent;
  transition: all 0.2s ease-in-out;
}
.btn-xs { padding: 0.2rem 0.5rem; font-size: 0.75rem; }
.btn-outline {
  color: #007bff; /* var(--primary-color) */
  border-color: #007bff; /* var(--primary-color) */
  background-color: transparent;
}
.btn-outline:hover {
  color: #fff;
  background-color: #007bff; /* var(--primary-color) */
}


.comment-input {
  width: 100%;
  padding: 0.75rem 1rem;
  font-size: 0.9rem;
  border: 1px solid #ced4da; /* var(--border-color) */
  border-radius: 0.2rem; /* var(--border-radius) */
  line-height: 1.5;
  box-sizing: border-box; /* Ensure padding doesn't expand width */
}
.comment-input:focus {
  border-color: #007bff; /* var(--primary-color) */
  box-shadow: 0 0 0 0.2rem rgba(0,123,255,.25);
  outline: none;
}

.no-question-selected {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  text-align: center;
  color: #6c757d; /* var(--text-muted-color) */
  font-size: 1.1rem;
}
</style>
